<!-- 登录 -->
<template>
<div  class="login_wrapper">
  <div class='login_container'>
    <!-- 头像区域 -->
    <div class="login_box">
      <img src="../../assets/img/common/logo.png" alt="">
    </div>
    <!-- 表单 -->
    <el-form label-width="0px" :model="form" :rules="rules" class="login_form" ref="loginForm">
      <el-form-item prop="username">
        <el-input 
          v-model="form.username"
          placeholder="请输入用户名"
          prefix-icon="iconfont icon-user">
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input 
          show-password
          v-model="form.password"
          placeholder="请输入密码"
          prefix-icon="iconfont icon-3702mima">
        </el-input>
      </el-form-item>
      <el-form-item class="btns" >
        <el-button type="primary" @click="loginValidate" >登录</el-button>
        <el-button type="info" @click="loginFromReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
 components: {},
 data(){
   return{
     userInfo:null,
     form:{
       username:'admin',
       password:'123456'
     },
      rules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
          { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
        ]
      }
   }
 },
 methods:{
   loginFromReset(){
     this.$refs.loginForm.resetFields()
   },
   loginValidate(){
     //判断格式是否正确并发送axios请求
     this.$refs.loginForm.validate(async valid=>{
        if(!valid) return;
        let {data} = await this.$http.post('login',this.form)
        this.userInfo = data.data
        //判断用户名密码是否正确，并保存token
        if (!this.userInfo) return this.$message.error(data.meta.msg)
        window.sessionStorage.setItem('token',this.userInfo.token)
        this.$router.push('/home')
        this.$message({
          showClose: true,
          message: data.meta.msg,
          type: 'success'
        });
     })
   }
 }
}
</script>
<style lang="less" scoped>
.login_wrapper{
  background-color: #2b4b6b;
  height: 100vh;
}
.login_container{
  position: relative;;
  width: 500px;
  height: 300px;
  background-color: #fff;
  left: 50%;
  top: 300px;
  transform: translate(-50%,-50%)
}
.login_box{
  position: absolute;
  left: 50%;
  width:130px;
  height: 130px;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px;
  transform: translate(-50%,-50%);
  background-color: #fff;
  img{
    width: 100%;
    border-radius: 50%;
  }
}
.login_form{
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 0 10px;
  .btns{
    display: flex;
    justify-content: flex-end;
  }
}

</style>